import Echarts from "@/components/Echart";
import "./index.scss";
// import { analysisXdate } from "@/utils/hook";
// import { dayjs } from "element-plus";
export default defineComponent({
	setup(props, ctx) {
		let echartRef = ref();
		let option = reactive({
			xAxis: {
				type: "category",
				data: [] as string[],
				axisLine: {
					lineStyle: {
						color: "#2695F6",
						width: 2
					}
				},
				axisTick: {
					show: false
				},
				axisLabel: {
					color: "#fff",
					fontSize: 13,
					fontWeight: 500
				}
			},
			tooltip: {
				trigger: "item",
				formatter: "{b} <br/>{a} : {c}KW"
			},
			yAxis: {
				type: "value",
				axisLine: {
					show: true,
					lineStyle: {
						color: "#2695F6",
						width: 2
					}
				},
				axisLabel: {
					formatter: "{value} KW",
					color: "#fff",
					fontSize: 13,
					fontWeight: 500
				},
				splitLine: {
					lineStyle: {
						color: "#0E507C",
						type: [5, 5],
						dashOffset: 3
					}
				}
			},
			series: [
				{
					name: "用电统计",
					smooth: 0.6,
					symbol: "none",
					lineStyle: {
						color: "#FFDC18",
						width: 5
					},
					data: [] as any,
					type: "bar",
					areaStyle: {
						color: {
							//线性渐变
							type: "linear",
							x: 0,
							y: 0,
							x2: 0,
							y2: 1,
							colorStops: [
								{
									offset: 0,
									color: "rgba(255,220,24)" // 0% 处的颜色
								},
								{
									offset: 1,
									color: "rgba(255,220,24,0)" // 100% 处的颜色
								}
							],
							global: false // 缺省为 false
						}
					},
					itemStyle: {
						color: {
							type: "linear",
							x: 0,
							y: 0,
							x2: 0,
							y2: 1,
							colorStops: [
								{
									offset: 0,
									color: "#26F6AF" // 0% 处的颜色
								},
								{
									offset: 1,
									color: "#26E8F6" // 100% 处的颜色
								}
							],
							global: false // 缺省为 false
						}
					}
				}
			],
			grid: {
				left: 65,
				top: 30,
				right: 10,
				bottom: 30
			}
		});
		const init = async () => {
			// let { result } = await getPowerStatistics({
			// 	productModel: "SSIOT-DH-CABINET",
			// 	key: "electricity",
			// 	startTime: dayjs(dayjs().add(-30, "d")).format("YYYY-MM-DD 00:00:00"),
			// 	endTime: dayjs().format("YYYY-MM-DD 00:00:00"),
			// 	cycle: 5,
			// 	valueType: 2
			// });
			// let rs = analysisXdate(30, result);
			// option.series[0].data = rs.data;
			// option.xAxis.data = rs.category;
			// echartRef.value.setchartOption(option);
		};
		onMounted(() => {
			setTimeout(() => {
				echartRef.value.setOption(option);
				echartRef.value.chartInit();
			});
		});
		provide("init", init);
		ctx.expose({
			init
		});
		return () => (
			<div class="statistics">
				<TimeBtn />
				<Echarts ref={echartRef} />
			</div>
		);
	}
});

const TimeBtn = defineComponent({
	setup() {
		const timerBtn = [
			{
				label: "近1月",
				value: 1
			},
			{
				label: "近3月",
				value: 3
			},
			{
				label: "近半年",
				value: 30
			}
		];
		let _init = inject("init") as Function;
		let timeActive = ref(1);
		const timerClick = (val: number) => {
			timeActive.value = val;
			_init();
		};
		return () => (
			<ul class="timeBtn">
				{timerBtn.map(item => {
					return (
						<li
							class={[item.value === timeActive.value ? "active" : ""]}
							onClick={() => {
								timerClick(item.value);
							}}
						>
							<span>{item.label}</span>
						</li>
					);
				})}
			</ul>
		);
	}
});
